<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form>
        姓名<input type="text" name="username" />
        <br />
        年龄<input type="text" name="age" />
        <br />
        性别：<input type="radio" name="sex" value="man" checked="checked" />男
        <input type="radio" name="sex" value="woman" />女
        <br />
        <input type="button" value="添加到表格" onclick="add()" />
    </form>
    <table cellspacing="0" border="1" width="100%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <th class="num">1</th>
            <th>王信强</th>
            <th>18</th>
            <th>男</th>
            <!-- 改变this指向,让del方法指向当前点击的a标签 -->
            <th><a href="javascript:;" onclick="del.call(this)">删除</a></th>
        </tr>
    </table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    function add() {
        // 获取姓名
        var name = $('input[name="username"]').val();
        //   获取年龄
        var age = $('input[name="age"]').val();
        //   获取选中的性别
        var sex = $('input[type="radio"]:checked').val() == "man" ? '男' : '女';
        // 获取行的长度，当索引
        var index = $('table tr').size();
        // 创建元素,并追加到table中
        $('<tr><th class="num">'+ index +'</th><th>' + name + '</th><th>' + age + '</th><th>' + sex + '</th><th><a href="javascript:;" onclick="del.call(this)">删除</a></th></tr>').appendTo($('table'));

    }
    function del() {
        // 找到tr的父级
        var parent = this.parentNode.parentNode.parentNode;
        // 找到tr
        var tr = this.parentNode.parentNode;
        // 从tr的父级下删除tr
        parent.removeChild(tr);
        // 将索引重新排序
      $('.num').each(function (index) {
          $(this).each(function () {
              $(this).text(index + 1);
          })
      })
    }
</script>

</html>